<template>
    <div class="app-container calendar-list-container">
  
      <!-- 查询和其他操作 -->
      <div class="filter-container">
        <el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入字典名称" v-model="listQuery.dictName"></el-input>
        <el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入字典类型" v-model="listQuery.dictType"></el-input>
        <el-select v-model="listQuery.status" clearable placeholder="字典状态" class="filter-item" style="width: 200px">
            <el-option :key="item.type" v-for="item in typeList" :label="item.name" :value="item.type">
            </el-option>
        </el-select>
        <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleQuery">查找</el-button>
        <el-button class="filter-item" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        <el-button class="filter-item" type="primary" @click="handleCreate" icon="el-icon-plus">添加</el-button>
        <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="delAll">批量删除</el-button>
      </div>
  
      <!-- 查询结果 -->
      <el-table
        size="small"
        :data="list"
        @selection-change="handleSelectionChange"
        v-loading="listLoading"
        element-loading-text="正在查询中。。。"
        border
        fit
        highlight-current-row
      >
        <el-table-column type="selection" width="55px"> </el-table-column>
        <el-table-column type="index" label="序号" header-align="center" align="center">
        </el-table-column>
  
        <el-table-column align="center" min-width="100px" label="字典名称" prop="dictName">
        </el-table-column>
        <el-table-column align="center" min-width="150px" label="字典类型">
            <template slot-scope="scope">
                <router-link :to="{name: 'dictDataList', params: { id: scope.row.dictType }}">
                    <div style="color: #337ab7;cursor: pointer;">{{ scope.row.dictType }}</div>
                </router-link>
            </template>
        </el-table-column>
        <el-table-column align="center" min-width="100px" label="状态">
            <template slot-scope="scope">
                <el-tag v-if="scope.row.status === '1'">停用</el-tag>
                <el-tag v-else>正常</el-tag>
            </template>
            
        </el-table-column>
        <el-table-column align="center" min-width="200px" label="备注" prop="remark">
        </el-table-column>
        <el-table-column align="center" min-width="150px" label="创建时间" prop="createTime">
        </el-table-column>
        <el-table-column align="center" label="操作" width="240px" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              @click="handleUpdate(scope.row, false)"
              >编辑</el-button
            >
  
            <el-button type="danger" size="small"  @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page"
          :page-sizes="[10,20,30,50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
  
      <!-- 添加或修改对话框 -->
      <el-dialog
      :close-on-click-modal="false"
        :title="textMap[dialogStatus]"
        :visible.sync="dialogFormVisible"
        width="40%"
      >
        <el-form :rules="rules" ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="80px" style='width: 700px; margin-left:50px;'>
            <el-form-item  label="字典名称" prop="dictName">
              <el-input style="width: 300px" v-model="dataForm.dictName"></el-input>
            </el-form-item>
            <el-form-item  label="字典类型" prop="dictType">
              <el-input style="width: 300px" v-model="dataForm.dictType"></el-input>
            </el-form-item>
            <el-form-item  label="状态">
                <el-radio-group v-model="dataForm.status">
                    <el-radio :label="'0'">正常</el-radio>
                    <el-radio :label="'1'">停用</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item  label="备注">
              <el-input type="textarea" :rows="2" style="width: 300px" v-model="dataForm.remark"></el-input>
            </el-form-item>
            
            
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button v-if="dialogStatus == 'create'" type="primary" @click="createData">确定</el-button>
          <el-button v-else type="primary" @click="updateData">确定</el-button>
        </div>
      </el-dialog>
  
    </div>
  </template>
  
  <style>
    .demo-table-expand {
      font-size: 0;
    }
    .demo-table-expand label {
      width: 200px;
      color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
      margin-right: 0;
      margin-bottom: 0;
    }
  </style>
  
  <script>
    import { list, createItem, updateItem, deleteitem } from "@/api/dictManage";
    import waves from "@/directive/waves"; // 水波纹指令
    import Tinymce from '@/components/Tinymce'
  
  export default {
    components: { Tinymce },
    directives: { waves },
    data() {
      return {
        typeList: [
        {
          type: "0",
          name: "正常",
        },
        {
          type: "1",
          name: "停用",
        },
      ],
        list: [
          
        ],
        delarr: [],
        multipleSelection: [],
        total: 0,
        listLoading: false,
        listQuery: {
          page: 1,
          limit: 10,
          dictName: '',
          dictType: '',
          status: '',
        },
        dataForm: {
          dictName: undefined,
          dictType: undefined,
          status: 1,
          remark: undefined,
        },
        dialogFormVisible: false,
        dialogStatus: '',
        textMap: {
          update: "编辑",
          create: "创建",
        },
        imageUrl: undefined,
        rules: {
          dictName: [{ required: true, message: "字典名称不能为空", trigger: "blur" }],
          dictType: [{ required: true, message: "字典类型不能为空", trigger: "blur" }],
        },
      }
    },
    created() {
        this.getList();
    },
    methods: {
        handleDictData(row){

        },
      resetForm() {
        this.dataForm = {
            dictName: undefined,
            dictType: undefined,
            status: 1,
            remark: undefined,
        };
      },
      handleCreate() {
        this.resetForm();
        this.dialogFormVisible = true;
        this.dialogStatus = "create";
        this.$nextTick(() => {
          this.$refs["dataForm"].clearValidate();
        });
      },
      createData() {
        this.$refs["dataForm"].validate((valid) => {
          if (valid) {
            createItem(this.dataForm)
                  .then(() => {
                    this.getList();
                    this.dialogFormVisible = false;
  
                    this.$notify({
                      title: "成功",
                      message: "创建成功",
                      type: "success",
                      duration: 2000,
                    });
                    this.getList()
                  })
          }
        });
      },
      getList() {
        this.listLoading = true
        list(this.listQuery).then(response => {
          this.list = response.data.data.items
          this.total = response.data.data.total
          this.listLoading = false
        }).catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
      },
  
      handleQuery() {
        this.listQuery.page = 1
        this.getList()
      },
       /** 重置按钮操作 */
       resetQuery() {
            this.listQuery = {
              dictName: '',
              dictType: '',
              status: '',
            };
            this.handleQuery();
        },
  
      handleSizeChange(val) {
        this.listQuery.limit = val
        this.getList()
      },
  
      handleCurrentChange(val) {
        this.listQuery.page = val
        this.getList()
      },
  
      handleUpdate(row) {
        this.dataForm = Object.assign({}, row);
        this.dialogStatus = 'update'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },
  
      updateData() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            updateItem(this.dataForm).then(() => {
                this.dialogFormVisible = false
                this.$notify({
                  title: '成功',
                  message: '更新成功',
                  type: 'success',
                  duration: 2000
                })
                this.getList()
              })
            
          }
        })
      },
  
      handleDelete(row) {
  
        this.$confirm('确认删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteitem({dictIds:row.dictId}).then(response => {
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 2000
            })
            this.getList()
          })
        }).catch(() => {
  
        })
  
      },
      delAll() {
            this.$confirm("确认删除吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    const length = this.multipleSelection.length;

                    if (length > 0) {
                        for (let i = 0; i < length; i++) {
                            this.delarr.push(this.multipleSelection[i].dictId);
                        }
                        const dictIds = this.delarr.join(",");
                        deleteitem({ dictIds: dictIds })
                            .then(() => {
                                this.$notify({
                                    title: "成功",
                                    message: "删除成功",
                                    type: "success",
                                    duration: 2000,
                                });
                                this.getList();
                            })
                            .catch(() => { });
                    } else {
                        this.$notify({
                            title: "警告提示",
                            message: "请选择要删除的信息！",
                            type: "warning",
                        });
                    }
                })
                .catch(() => { });
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
    }
  }
  </script>
  <style>
    .ad-avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .ad-avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .ad-avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .ad-avatar {
      display: block;
    }
  </style>
  